<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <p id="title">{{ !collapsed ? "疫情可视化" : "后台" }}</p>
      </div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="7">
          <router-link to="/dashboard">
            <a-icon type="dashboard" />
            <span>首页</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu v-for="(item, index) in navs" :key="item.path">
          <span slot="title">
            <a-icon :type="item.navIcon" /><span>{{ item.menuName }}</span>
          </span>
          <a-menu-item v-for="(it, id) in item.children" :key="it.path">
            <router-link :to="it.path">
              <a-icon :type="it.navIcon" />
              <span>{{ it.menuName }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" class="header">
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />
        <a-button type="default" @click="signout" class="button">
          登出
        </a-button>
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px', overflow: 'scroll' }">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { getNavs } from '@/api/menu'
import { logout } from '@/api/login'
import { removeToken } from '@/utils/auth'
export default {
  data() {
    return {
      collapsed: false,
      navs: []
    };
  },
  methods: {
    signout() {
      logout().then(res => {
        console.log(res)
        removeToken()
        this.$router.push('/login')
      })
    }
  },
  created() {
    getNavs().then(res => {
      this.navs = res;
      console.log(this.navs);
    })
  }
};
</script>

<style lang="less" scoped>
// .header {
//   display: flex;
//   justify-content: space-between;
// }
.button {
  margin-left: 1160px;
}
#title {
  margin: 0;
  color: aliceblue;
  line-height: 31.9px;
  overflow: hidden;
  position: relative;
  left: 29%;
  /* transform: translateX(-50%); */
}

#components-layout-demo-custom-trigger {
  height: 100vh;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>